<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr" :key="item">
            <input type="checkbox" name="" id="">
            <b>{{item}}</b>
        </li>
    </ul>
    <h1>{{person.name}}</h1>

    <button @click="handleClick">点🐔</button>
</div>
</body>

</html>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script>
    //vue视图不响应的情况:
    //1.在vue2中,使用数组的index和数组的length属性操作数组数据的时候,视图是不会响应的?
    //原因:defineProperty的方法缺陷,对数组操作的时候性能低,所以vue2重写了数组原型上的7个方法,shift unshift pop push splice reverse sort,只有调用了这七个方法中的其中一个方法,视图层才会发生变化

    //2.数据没有在data中初始化,而是后续添加进入的属性,也不会响应视图更新

    //解决方案:

    //1.不要操作数组的index和length

    //2.使用vm.$set(taget,key,value)  (实例的函数内部使用this.$set)来重新让数据变成响应式

    // let vm = new Vue({
    //     data: {
    //         arr: ['吃饭', '睡觉', '写代码'],
    //         person: {}
    //     }
    // }).$mount('#app')
</script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //在vue3中,因为底层使用的事proxy,所以解决了defineProperty的缺陷
    // - 所以能够完美的响应数组变化,包括操作index和length属性
    // - vue3中没有$set这个api了,没有初始化的属性,一样能够响应
    let app = Vue.createApp({
        data() {
            return {
                arr: ['吃饭', '睡觉', '写代码'],
                person: {}
            }
        },
        methods: {
            handleClick() {
                //操作数组的index和操作数组的length属性
                // this.arr[2] = '改bug'
                // this.arr.length = 0;
                // this.person.name = '韩梅梅'
                this.arr.splice(1, 1)
            }
        }
    })

    app.mount('#app')
</script>